<template>
  <div class="animated fadeIn">
    <div class="row">
      <div class="col-lg-12">
        <b-card header="<i class='fa fa-align-justify'></i> 产品">
          <div class="search-box">
            <b-button variant="outline-primary" @click="addPro">添加goodsid</b-button>
          </div>
          <table class="table table-striped">
            <thead>
              <tr>
                <th>序号</th>
                <th>GoodsId</th>
                <th>产品名</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in currentData" :key="index">
                <td>{{ index + 1 + base }}</td>
                <td>{{ item.goodsid }}</td>
                <td>{{ item.name }}</td>
                <td>
                  <span class="badge badge-success" @click="viewDetail(item.goodsid)">详情</span>
                  <!-- <span class="badge badge-success" @click="editLv3Pro(item.goodsid)">编辑</span> -->
                </td>
              </tr>
            </tbody>
          </table>

          <el-pagination @current-change="handleCurrentChange" layout="prev, pager, next" :current-page.sync="current" :page-size="10" :total="totalPage">
          </el-pagination>

        </b-card>
      </div>
    </div>
    <el-dialog title="详情" :visible.sync="visible" append-to-body center>
      <table class="viewing">
        <tbody>
          <tr>
            <td>GoodsID</td>
            <td>{{viewing.goodsid}}</td>
          </tr>
          <tr>
            <td>名称</td>
            <td>{{viewing.name}}</td>
          </tr>
          <tr>
            <td>产品图片</td>
            <td>
              <img :src="proPic" alt="" width="120">
            </td>
          </tr>
          <tr>
            <td>Icons</td>
            <td>
              <img v-for="i in icons" :src="i" width="40" :key="i" alt="">
            </td>
          </tr>
          <tr>
            <td>PDF图片</td>
            <td>
              <a :href="pdfPic" target="_blank">
                <img :src="pdfPic" width="120" alt="">
              </a>
            </td>
          </tr>
          <tr>
            <td>PDF文件</td>
            <td><a :href="pdfFile" target="_blank" :download="pdfFile">{{viewing.pdf}}</a></td>
          </tr>
          <tr>
            <td>电子书地址</td>
            <td><a :href="viewing.pdfbook" target="_blank">{{viewing.pdfbook}}</a></td>
          </tr>
          <tr>
            <td>视频地址</td>
            <td><a href="viewing.movie" target="_blank">{{viewing.movie}}</a></td>
          </tr>
          <tr>
            <td>特点</td>
            <td v-html="viewing.features"></td>
          </tr>
          <tr>
            <td>规格</td>
            <td v-html="viewing.specifications"></td>
          </tr>
          <tr>
            <td>特殊用途</td>
            <td v-html="viewing.specificUse"></td>
          </tr>
          <tr>
            <td>备注</td>
            <td v-html="viewing.remarks"></td>
          </tr>
        </tbody>
      </table>
    </el-dialog>
  </div>
</template>

<script>
  import { selectLevel3, proPicUrl } from '../../service/api'
  import _ from 'lodash'

  export const iconPath = `https://www.takigen.cn/static/assets/icons/`
  export default {
    name: 'lv3',
    data () {
      return {
        current: 1,
        datas: [],
        totalPage: '',
        /* 详情dialog */
        visible: false,
        viewing: {}
      }
    },
    computed: {
      currentData () {
        return this.datas[this.current - 1]
      },
      base () {
        return 10 * (this.current - 1)
      },
      proPic () {
        return `${proPicUrl}lv4/${this.viewing.class1}/${this.viewing.image}`
      },
      pdfPic () {
        return `${proPicUrl}pdf_png/${this.viewing.class1}/${this.viewing.pdfimage}`
      },
      pdfFile () {
        return `${proPicUrl}pdf/${this.viewing.class1}/${this.viewing.pdf}`
      },
      icons () {
        const v = this.viewing.icon
        return v ? v.toLowerCase().split(' ').map(v => `${iconPath}icon_${v}.png`) : []
      }
    },
    methods: {
      viewDetail (goodsId) {
        this.visible = true
        this.viewing = this.currentData.find(v => v.goodsid === goodsId)
      },
      editLv3Pro (goodsId) {
        this.$router.push({
          path: `/product/p_goodsid?id=${goodsId}`
        })
      },
      /* 新增产品 */
      addPro () {
        this.$router.push({
          path: '/product/p_goodsid'
        })
      }
    },
    created () {
      // fetch
      selectLevel3(this.$route.query.id)
        .then(({ data, err }) => {
          if (data.code === 200) {
            const res = data.result.filter(item => item && !!item.goodsid)
            this.datas = _.chunk(res, 10)
            this.totalPage = res.length
          }
        })
    }
  }
</script>

<style type="text/scss" rel="stylesheet/scss" lang="scss" scoped>
  .badge {
    cursor: pointer;
  }
  .search-box {
    vertical-align: top;
    margin-bottom: 20px;
  }
  .viewing {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    tr:nth-child(odd) {
      background-color: rgba(0, 0, 0, 0.05);
    }
    td {
      padding: 5px 15px;
    }
    img {
      padding: 2px;
    }
  }
</style>
<style>
  .viewing table ul {
    margin: 0;
  }
</style>

